<template>
  <div class='base-info'>
    <header>基础资料</header>
    <main>
      <div v-for="(item, index) in modelData" :key="index" :class="{clearB:true,mb20:true}">
        <span class="title">{{item.label}}：</span>
        <UploadImg v-if="item.upload" :keys="item.prop" :defaultImg0="info[item.prop]||item.default" @success="changePic" :path="item.path" />
        <span v-else-if="item.islabel">{{info[item.prop]}}</span>
        <el-input v-else-if="item.isinput" v-model="info[item.prop]" :readonly="!noSubmit&&!item.noInput" placeholder="" :class="'input '"></el-input>
        <span v-if="item.isChecked" class="ft12 ml10 color-blue"><span :class="'iconfont icon-renzheng1 mr5 '+item.class2"></span>已认证</span>
        <el-button v-if="item.button" :type="item.noInput?'primary':'danger'" class="btn ml5" @click="bindBank(item)">{{item.noInput?'绑定银行卡':'解绑银行卡'}}</el-button>
      </div>
      <el-button v-if="noSubmit" type="primary" class="submit-btn" @click="submit" >提交</el-button>
    </main>

    <BankCard v-if="$store.state.dias.bankcard.show" :baseInfo="info" />
  </div>
</template>
<script>
import UploadImg from '@/components/upload/uploadImg.vue'
import BankCard from './dia/bankcard.vue'
import Mixins from '@/mix/mix.js'
export default {
  components: {UploadImg,BankCard},
  name: "",
  data() {
    return {
      modelData:[
        {prop:"headpic",label:"头像",upload:true,default:require('@/assets/imgs/center/default_user.jpg'),path:PATH+"iuser/getPicAddress.do"},
        {prop:"phone",label:"联系电话",islabel:true,isChecked:true,checked:true,class2:'lh30',},
        {prop:"realName",label:"姓名",isinput:true,isChecked:true,class2:'lh30',checked:true,},
        {prop:"idno",label:"身份证证号",isinput:true,isChecked:true,checked:true,class2:'lh30'},
        {prop:"bankNo",label:"银行卡卡号",isinput:true,noInput:true,isChecked:true,class2:'lh30',button:true},
      ],
      info:{
        id:"",
        headpic:"",
        phone:"",
        bankNo:"",
        realName:"",
        idno:"",
        idpicUp:"",
        idpicDown:"",
      },
      noSubmit:true, //是否已经提交过信息
    };
  },
  methods: {
    /**
     * 显示弹框
     */
    showBank(){
      this.$store.state.dias.bankcard.show=true
    },

    initInfo(){
      this.modelData.forEach(ele=>{
        this.info[ele.prop]=this.userInfo[ele.prop]
        // if(ele.prop=="idno"&&(this.userInfo.status==1||this.userInfo.status==3)){
        //   this.info.idno=_g.encrypt(this.info.idno,"身份证");
        // }
      })
      this.info.id=this.userInfo.id
      this.useStatus(this.userInfo.status)
    },

    /**
     * @name 初始化使用status
     */
    useStatus(status){
      switch(status){
        case 0 : this.noSubmit=true;this.modelData.forEach(ele=>{
                  if(ele.prop!='headpic')ele.isChecked=false
                });this.$set(this.modelData[4],'button',false);break;
        case 1 : this.noSubmit=false;
                this.modelData.forEach(ele=>{
                  if(ele.prop!='headpic'){
                    ele.isChecked=false;
                    ele.islabel=true
                  }
                });
                this.$set(this.modelData[4],'button',false);
                break;
        case 2 :_g.toMessage({status:1,msg:"审核不通过"});this.useStatus(0);break;
        case 3 :_g.toMessage({status:0,msg:"审核通过"});
                this.$set(this.modelData[4],'button',true);
                this.$set(this.modelData[4],'noInput',false);
                this.noSubmit=false;
                this.modelData.forEach(ele=>{
                  if(ele.prop!='headpic'){
                    ele.isChecked=true;
                    ele.islabel=true
                  }
                });
                break;
      }
    },

    /**
     * @name 上传图片的回调
     */
    changePic(res){
      this.info[res.key]=res.data
      this.rewriteInfo({headpic:res.data})
    },

    /**
     * @name 提交
     */
    submit(){
      let params=this.info

      if(_g.checkParams(this.modelData,params))return
      _g.apiPost('iuser/bindBank.do',params).then(res=>{
        _g.toMessage(res)
        if(res.status==0){
          this.rewriteInfo(params)
          this.noSubmit=false
        }
      })
    },
    
    /**
     * @name 绑定银行卡
     */
    bindBank(item){
      if(!item.noInput){
        this.nobind(item)
      }else{
        this.dobind(item)
      }
    },

    dobind(item){
      let params={
        headpic:this.userInfo.headpic,
        phone:this.info.phone,
        bankNo:this.info.bankNo,
        realName:this.info.realName,
        idno:this.userInfo.idno,
      }
      let model=[
        {prop:"bankNo",label:"银行卡卡号",checked:true},
        {prop:"realName",label:"姓名",checked:true},
        {prop:"idno",label:"身份证证号",checked:true}
      ]
      if(_g.checkParams(model,params))return
      _g.apiPost('iuser/bindBank.do',params).then(res=>{
        _g.toMessage(res)
        if(res.status==0){
          this.$set(item,"noInput",!item.noInput)
          this.$set(this.modelData[4],'isChecked',true)
          this.$set(this.modelData[4],'noInput',this.userInfo.bankNo?true:false)
          this.rewriteInfo({bankNo:params.bankNo})
        }
      })
    },

    nobind(item){
      _g.apiPost('iuser/relieveBinding.do').then(res=>{
        _g.toMessage(res)
        if(res.status==0){
          this.info.bankNo="";
          this.$set(this.modelData[4],'isChecked',false)
          this.$set(this.modelData[4],'islabel',false)
          this.$set(this.modelData[4],'isinput',true)
          this.$set(item,"noInput",!item.noInput)
          this.rewriteInfo({bankNo:""})
        }
      })
    }
  },
  created() {
    this.initInfo()
  },
  mixins:[Mixins]
};
</script>
<style lang="scss" scoped>
.base-info {
  font-size: 14px;
  color: #666;

  header{
    line-height: 50px;
    text-indent: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
  main{
    padding: 35px 180px;
    min-height: 700px;

    >div{
      display: flex;

      >span.title{
        width: 100px;
        text-align: right;
        margin-right: 10px;
      }
      span{
        line-height: 30px;
      }
      .btn{
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 0
      }
      .input{
        width: 200px;
        height: 30px;
      }
    }
    .submit-btn{
      width: 180px;
      border-radius: 0;
      padding: 0;
      line-height: 36px;
      margin-left: 100px;
      margin-top: 20px;
    }
  }
  .iconfont.lh30{
    line-height: 30px;
  }
}
</style>